<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title> #{othersCalendarBean.user.name}'s Calendar</title>
        <style type="text/css">
            .value {
                width: 1080px;
            }
            
            #logo{
                position: absolute;
                margin-top: -26px;
            }
            #topContent{
                font-size: 25px; 
                /*margin-right: 27px;*/
                margin-top: 2px;
                /*                border-color: green;
                                border-width: 2px;
                                border-style: solid;*/
                text-align: right;
            }
            #topImages{
                /*margin-left: 86%;*/
                margin-top: 2px;
                margin-right: 20px;
                /*                border-color: blue;
                                border-width: 2px;
                                border-style: solid;*/
                text-align: right;
                float: right;
                display: inline;
            }
            #calendar{
                /*                border-color: blue;
                                border-width: 2px;
                                border-style: solid;*/
                margin-left: 10%;
                margin-right: 10%;
            }
            #topText{
                /*margin-right: 15%;*/
                margin-top: 5px;
                /*                border-color: red;
                                border-width: 2px;
                                border-style: solid;*/
                text-align: right;
                float: right;
                display: inline;
            }
            #notification{
                text-align: right;
                margin-right: 20px;
                margin-bottom: 10px;
            }
            
            .ui-layout, .ui-layout-doc, .ui-layout-unit, .ui-layout-wrap, .ui-layout-bd, .ui-layout-hd{
                border: none;
            }
            
            /*            #j_idt24,#j_idt25,#j_idt26,#j_idt27,#j_idt28,#j_idt29,#j_idt30,#j_idt31,#j_idt32,#j_idt33,#j_idt34,#j_idt35,#j_idt36,
                        #j_idt37,#j_idt38,#j_idt39,#j_idt40,#j_idt41,#j_idt42,#j_idt43,#j_idt44,#j_idt45,#j_idt46,#j_idt47,#j_idt48,#j_idt49,
                        #j_idt50{
                            height:0 ;
                        }*/
            /*ui-dialog ui-widget ui-widget-content ui-overlay-hidden ui-corner-all ui-shadow ui-draggable ui-resizable*/
            
            //to changhe rows height int the calendar
            .fc-week td div{
                min-height: 40px !important;
            }
        </style>        
    </h:head>
    
    <h:body>
        <p:layout fullPage="true">
            <p:growl id="messages" showDetail="true" autoUpdate="true"/>
            <p:layoutUnit position="north" resizable="true" size="64">
                <div id="logo">
                    <p>
                        <h:link outcome="home">
                            <h:graphicImage  value="/images/meteocal2.png" width="30px" height="30px"/>
                            <h style="margin-top: -26px; margin-left:33px ;position: absolute">MeteoCal</h>
                        </h:link>
                    </p>
                </div>
                <div id="topContent">
                    <h:form>
                        <div id="topImages">
                            <h:link outcome="settings">
                                <h:graphicImage  value="/images/settings.png" width="36px" height="36px"/>
                            </h:link>
                            &nbsp;
                            <h:link outcome="findUser">
                                <h:graphicImage  value="/images/findUser.png" width="36px" height="36px"/>
                            </h:link>
                        </div>
                        <div id="topText">
                            <h style="color: red">#{othersCalendarBean.user.name}'s calendar</h>
                            &nbsp;
                            &nbsp;
                            &nbsp;
                            <p:commandLink action="#{loginBean.logout()}" value="Logout"/>
                            &nbsp;
                            <h>#{userBean.name}</h>
                            &nbsp;
                        </div>
                        
                    </h:form>
                </div>
            </p:layoutUnit>
            <p:layoutUnit position="center" resizable="true" size="55%">
                <h:form>
                    <div id="calendar">
                        <p:growl id="messages" showDetail="true" autoUpdate="true"/>
                        
                        <h:panelGrid columnClasses="value">
                            <p:schedule id="schedule" value="#{othersCalendarBean.eventModel}" widgetVar="myschedule" timeZone="GMT+2">
                                <p:ajax event="eventSelect" listener="#{othersCalendarBean.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
                            </p:schedule>       
                        </h:panelGrid>
                    </div>
                    
                    <p:dialog widgetVar="eventDialog" header="Event Details" showEffect="clip" hideEffect="clip">
                        <h:panelGrid id="eventDetails" columns="2">
                            <h:outputLabel for="title" value="Title:"  />
                            <p:inputText disabled="true" id="title" value="#{othersCalendarBean.title}" required="true" />
                            
                            <h:outputLabel for="location" value="Location:" />
                            <p:autoComplete  disabled="true" id="location" value="#{othersCalendarBean.locationName}" />
                            
                            <h:outputLabel for="from" value="From:" />
                            <p:inputMask disabled="true" id="from" value="#{othersCalendarBean.startDate}" mask="99/99/9999, 99:99">
                                <f:convertDateTime pattern="dd/MM/yyyy, HH:mm" timeZone="GMT+2"/>
                            </p:inputMask>
                            
                            <h:outputLabel for="to" value="To:" />
                            <p:inputMask disabled="true" id="to" value="#{othersCalendarBean.endDate}" mask="99/99/9999, 99:99">
                                <f:convertDateTime pattern="dd/MM/yyyy, HH:mm" timeZone="GMT+2"/>
                            </p:inputMask>
                            
                            <h:outputText value="Alert Level: " />
                            <p:selectOneMenu value="#{calendarBean.badWeatherLevel}" disabled="true">
                                <f:selectItem itemLabel="Sunny" itemValue="1" />
                                <f:selectItem itemLabel="Cloudy" itemValue="2" />
                                <f:selectItem itemLabel="Rainy" itemValue="3"/>
                                <f:selectItem itemLabel="Stormy" itemValue="4" />
                                <f:selectItem itemLabel="Snowy" itemValue="5" />
                            </p:selectOneMenu>
                            
                            <h:outputText  value="Public: " />
                            <p:selectBooleanCheckbox disabled="true" value="#{othersCalendarBean.isPublic}" />
                            
                            <h:outputText value="Outdoor: " />
                            <p:selectBooleanCheckbox disabled="true" value="#{othersCalendarBean.outdoor}" />
                            
                            <h:outputLabel for="invitees" value="Invitees: " />
                            <p:inputText  disabled="true" id="invitees" value="#{othersCalendarBean.invitees}"  />
                            
                            <h:outputText value="Weather: " />
                            <h:outputText value="#{othersCalendarBean.weather}"/>
                            
                            <h:outputText/>                    
                            <p:graphicImage width="50px" height="50px" url="#{othersCalendarBean.iconURL}"/>
                        </h:panelGrid>
                    </p:dialog>    
                </h:form>
            </p:layoutUnit>    
            
            <p:layoutUnit position="south" resizable="true" size="60" minSize="60">
                <div id="notification">
                    <h:link outcome="notifications">
                        <h:graphicImage  value="/images/notification.png" width="40px" height="40px"/>
                    </h:link>
                </div>
            </p:layoutUnit>
            
        </p:layout>
    </h:body>
</html>

